<template>
	<u-navbar :is-back="true" title-color="#117B12" :is-fixed="true" title="注册" :background="{ background: 'none' }"
		:border-bottom="false" :back-icon-name="isNavBack?'nav-back':'home'" :custom-back="customBack">
	</u-navbar>
	<view class="login-wrap">
		<u-gap height="60"></u-gap>
		<view class="w656">
			<u-form :model="formData" ref="formRef" :border-bottom="false" :error-type="['toast']">
				<u-form-item :label="labelString" prop="referralCode" :label-width="0">
					<u-input v-model.trim="formData.referralCode" placeholder="请输入推荐码" type="text" />
				</u-form-item>
				<u-form-item :label="labelString" prop="phone" :label-width="0">
					<u-input v-model.trim="formData.phone" placeholder="请输入手机号" type="number" />
				</u-form-item>
				<u-form-item :label="labelString" prop="smsCode" :label-width="0">
					<u-input v-model="formData.smsCode" placeholder="请输入验证码" type="text"></u-input>
					<view slot="right">
						<view class="color-primary u-p-l-28 u-p-r-28 getCodeBtn" @click="getCode">
							{{codeFlag?'获取验证码':`剩余${codeSeconds}秒`}}
						</view>
					</view>
				</u-form-item>
				<u-form-item :label="labelString" prop="password">
					<u-input v-model.trim="formData.password" type="password" :password-icon="true"
						placeholder="请输入6-20位密码" />
				</u-form-item>
				<u-form-item :label="labelString" prop="rePassword">
					<u-input v-model.trim="formData.rePassword" type="password" :password-icon="true"
						placeholder="请确认密码" />
				</u-form-item>
				<view class="u-text-center">
					<u-checkbox-group>
						<u-checkbox v-model="agreeFlag" name="agree" shape="circle" active-color="#117B12">
							<view class="u-font-24">
								我已阅读并同意
								<text class="color-primary" @tap.stop="toArticle(1)">《用户协议》</text>
							</view>
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<u-gap height="40"></u-gap>
				<u-button :loading="loading" @click="submit" :custom-style="customStyle" type="primary"
					shape="circle">立即注册</u-button>
				<u-gap height="36"></u-gap>
			</u-form>
			<u-gap height="36"></u-gap>
		</view>
	</view>
</template>

<script setup>
	import JSEncrypt from 'jsencrypt';
	import store from '@/store/index.js'; //需要引入store
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance
	} from 'vue'
	const {
		proxy,
	} = getCurrentInstance()
	const {
		nav,
		navLogin
	} = proxy.$util;
	import {
		onReady,
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	const props = defineProps({
		isBack: {
			type: [String, Number],
			default: '',
		},
		code: {
			type: String,
			default: '',
		}
	})
	const isNavBack = computed(v => {
		if (props.isBack) {
			return true
		}
		return false
	})
	const customBack = () => {
		if (isNavBack.value) {
			uni.navigateBack({
				fail() {
					nav('/pages/index/index')
				}
			});
		} else {
			nav('/pages/index/index')
		}
	}
	const customStyle = {
		height: '88rpx',
		lineHeight: '88rpx'
	}
	const labelString = ''
	const formRef = ref()
	const formRules = {
		phone: [{
			required: true,
			message: '请输入手机号',
			trigger: 'blur,change'
		},{
			validator: (rule, value, callback) => {
				if (!uni.$u.test.mobile(value)) {
					return false
				} else {
					return true
				}
			},
			message: '手机号格式不正确',
			trigger: 'change, blur',
		}],
		password: [{
			required: true,
			message: '请输入密码',
			trigger: 'blur,change'
		}, {
			validator: (rule, value, callback) => {
				if (!uni.$u.test.rangeLength(value,[6,20])) {
					return false
				} else {
					return true
				}
			},
			message: '密码长度6-20位',
			trigger: 'change, blur',
		}],
		rePassword: [{
			required: true,
			message: '请确认密码',
			trigger: 'blur,change'
		}],
		referralCode: [{
			required: true,
			message: '请输入推荐码',
			trigger: 'blur,change'
		}],
		// smsCode: [{
		// 	required: true,
		// 	message: '请输入验证码',
		// 	trigger: 'blur,change'
		// }],
	};
	const formData = reactive({
		referralCode: '',
		phone: '',
		password: '',
		rePassword: '',
		smsCode:''
	})
	const agreeFlag = ref(true)
	const loading = ref(false);
	
	const codeSeconds = ref(60);
	const codeFlag = ref(true);
	const getCode = () => {
		if(!codeFlag.value){
			return;			
		}
		if(!formData.phone){
			uni.$u.toast('请输入手机号');
			return;	
		}
		if(!uni.$u.test.mobile(formData.phone)){
			uni.$u.toast('手机号格式不正确');
			return;	
		}
		uni.showLoading({
			title: '发送中',
			mask: true
		});
		proxy.$u.api.sendCode({
			type:0,
			phone:formData.phone
		}).then(res => {
			let {
				data,
				code,
				msg
			} = res;
			if (code == 200) {
				uni.$u.toast('验证码已发送');
				codeFlag.value = false;
				codeSeconds.value = 60;
				startCountdown();
			} else {
				uni.$u.toast(msg || '错误');
			}
		}).catch(e => {
			
		})	
	}
	const startCountdown = (seconds) => {
		if (codeSeconds.value > 0) {
			setTimeout(() => {
				codeSeconds.value --;
				startCountdown();
			}, 1000);
		} else {
			codeFlag.value = true;
		}
	}
	const toArticle = (type) => {
		nav('/pagesSub/articleDetail/articleDetail?type='+type)
	}
	const submit = (e) => {
		if (!agreeFlag.value) {
			uni.$u.toast('请先阅读并同意《用户协议》');
			return;
		}
		formRef.value.validate(valid => {
			if (valid) {
				let _data = JSON.parse(JSON.stringify(formData));
				_data.roleSids = ['2-26ffdaf4817a4240b7a07cd4093efa70']; //角色key
				if (_data.rePassword != _data.password) {
					uni.$u.toast('两次密码不一致。');
					return;
				}
				loading.value = true
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				delete _data.rePassword;
				let encryptor = new JSEncrypt() // 创建加密对象实例			
				encryptor.setPublicKey(pub_keys.value) // 设置公钥
				_data.password = encryptor.encrypt(_data.password) // 对内容进行加密
				proxy.$u.api.registerMobile(_data).then(res => {
					let {
						data,
						code,
						msg
					} = res;
					if (code == 200) {
						uni.$u.toast('注册成功,去登录');
						setTimeout(() => {
							uni.$u.route({
								url: 'pages/login/login',
								type: 'reLaunch'
							});
						}, 1500)
					} else {
						uni.$u.toast(msg || '错误');
					}
					loading.value = false
				}).catch(e => {
					loading.value = false
				})
			} else {
				console.log('验证失败');
			}
		});
	}
	const pub_keys = ref();
	const getKey = () => {
		uni.showLoading({
			title: '加载中',
			mask: true
		});
		proxy.$u.api.publicKey().then(res => {
			let {
				data,
				code,
				msg
			} = res;
			if (code == 200) {
				pub_keys.value = data
			} else {
				uni.$u.toast(msg || '错误');
			}
		}).catch(e => {})
	}

	onReady(() => {
		formRef.value.setRules(formRules);
	})
	onLoad((d) => {
		getKey();
	})
	onShow(() => {
		formData.referralCode = props.code;
		if (!props.code) {
			uni.$u.toast('请先填写推荐码');
		}
	})
</script>
<style>
	page {
		background: #F2FDF2
	}
</style>
<style lang="scss" scoped>
	page {
		background: #F2FDF2;
	}

	.tab-box {
		margin: 0 100upx;
	}

	.tab-item {
		position: relative;
		text-align: center;

		text {
			position: relative;
			z-index: 999;
			font-size: 32upx;
		}

		&.active {
			font-weight: bold;
		}

		&.active::after {
			content: " ";
			background: linear-gradient(90deg, #117B12 0%, rgba(17, 123, 18, 0.6) 100%);
			width: 80upx;
			height: 16upx;
			position: absolute;
			bottom: 0;
			left: 50%;
			margin-left: -40upx;
		}
	}

	.login-wrap {
		::v-deep.u-form-item {
			background-color: #ffffff;
			// height: 88rpx;
			// box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(210, 223, 243, 0.3);
			border-radius: 88upx;
			margin-bottom: 40upx;
			padding: 10upx 24upx;

		}

	}

	.getCodeBtn {
		position: relative;

		&::after {
			content: " ";
			background: #117B12;
			width: 1px;
			height: 30upx;
			position: absolute;
			top: 50%;
			left: 0;
			margin-top: -15upx;
		}
	}

	.logo {
		width: 160rpx;
		height: 160rpx;
	}

	.logo-title {
		font-size: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-weight: bold;
	}

	.w656 {
		width: 656upx;
		margin: 0 auto;
	}
</style>